<template>
  <div style="width: 100%" v-show="show">
    <el-collapse v-model="activeName">
      <el-collapse-item title="扩展的属性" name="1">
        <avue-crud :option="option"
                   :table-loading="loading"
                   :data="data"
                   @selection-change="v=>selection=v"
                   ref="crud">
          <template slot="menuLeft">
            <el-button size="medium"
                       type="primary"
                       :disabled="dialogType() === 'view'"
                       @click="$refs['gpd'].open(selection,{purpose:1})">
              添加
            </el-button>
            <el-button v-if="showComponent"
                       :disabled="dialogType() === 'view'"
                       size="medium"
                       type="primary"
                       @click="$refs['ap'].open()">
              新增并添加
            </el-button>
            <el-button size="medium"
                       type="danger"
                       :disabled="dialogType() === 'view'"
                       @click="remove()">
              移除
            </el-button>
          </template>
        </avue-crud>
      </el-collapse-item>
      <el-collapse-item title="继承的属性" name="2">
        <avue-crud :option="opt(option)"
                   :table-loading="loading"
                   :data="extendsData"
                   ref="crud">
        </avue-crud>
      </el-collapse-item>
    </el-collapse>

    <add-properties ref="ap" @addToList="v=>addToList(v,'ap')"></add-properties>
    <get-properties-dialog ref="gpd" :column="option.column"
                           @addToList="v=>addToList(v,'gpd')"></get-properties-dialog>
  </div>
</template>

<script>
import GetPropertiesDialog from "@/views/DMDComponent/getPropertiesDialog.vue";
import AddProperties from "@/views/DMDComponent/addProperties.vue";

import * as common from "@/api/common";

export default {
  name: "Properties",
  components: {AddProperties, GetPropertiesDialog},
  inject: ["temp", "allFormData", "parentIdList", "dialogType"],
  props: {
    show: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    extendsAttributes: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      data: [],
      extendsData: [],
      activeName: ["1", "2"],
      loading: false,
      option: {
        height: '300px',
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: true,
        labelWidth: 120,
        // menuWidth: 200,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "center",
        menu: false,
        column: [
          {
            label: '英文名称',
            prop: 'columnName',
          },
          {
            label: "中文名称",
            prop: "name",
          },
          {
            label: "中文描述",
            prop: "describeCn",
          },
          {
            label: "英文描述",
            prop: "describeEn",
          },
          {
            label: "类型",
            prop: "attributeType",
          },
          {
            label: "分类",
            prop: "attributeClassify"
          },
          {
            label: "必填",
            prop: "required",
            dicData: [
              {
                label: "是",
                value: 1
              },
              {
                label: "否",
                value: 0
              },
            ]
          },

          {
            label: "单位组",
            prop: "unitGroup"
          },
          {
            label: "默认单位",
            prop: "unit"
          },
          {
            label: "默认值",
            prop: "columnDefault",
            slot:true
          },
        ],
        afterColumn: [{
          label: "所属类型/接口",
          prop: "packageName",
          width: 120
        }]
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 1
      },

      selection: [],
    }
  },
  computed: {
    showComponent() {
      return this.temp === "EM";
    }
  },
  methods: {
    // 从扩展属性列表中移除
    remove() {
      let data = this.deepCopy(this.selection).map(item => item.oid);
      let properties = this.deepCopy(this.data);
      this.data = [];
      properties.forEach(item => {
        if (!data.includes(item.oid)) {
          this.data.push(item);
        }
      })
    },
    //添加到扩展属性列表
    addToList(list, ref) {
      let properties = this.deepCopy(this.data);
      this.data = [];
      if (properties.length > 0) {

        let ids = properties.map(item => item.oid ? item.oid : -1);
        list.forEach(item => {
          if (ids.length > 0 && item.oid && !ids.includes(item.oid)) {
            properties.push(item);
          }
        })
      } else {
        properties.push(...list);
      }

      this.$nextTick(() => {
        this.data = properties;
        this.$refs[ref].close();
      })
    },
    opt(option) {
      let o = JSON.parse(JSON.stringify(option));
      o.header = false;
      if (!this.showComponent) {
        return o;
      }
      o.column = [...option.column, ...option.afterColumn];
      o.selection = false;
      return o;
    },


    getExtends() {
      let {parentId} = this.allFormData();
      let item = {};
      let treePath = "";
      this.parentIdList().forEach(i => {
        if (i.oid === parentId) {
          item = i;
        }
      })
      if (item.treePath) {
        treePath = item.treePath + ","
      }
      treePath += item.oid;
      common.getAttributesByTypeId({typeIds: treePath}).then(res => {
        this.extendsData = res.data.data;
        this.$emit("update:extendsAttribute", this.deepCopy(res.data.data));
      })
    },

    getTabData() {
      return {form: this.data, flag: true}
    },
    setTabData() {
    },

    before_() {
      if (!this.showComponent) {
        let option = JSON.parse(JSON.stringify(this.option));
        option.menu = true;
        option.menuWidth = 100;
        option.column = [
          {
            label: "中文名称",
            prop: "name",
          },
          {
            label: '英文名称',
            prop: 'columnName',
          },
          {
            label: "中文描述",
            prop: "describeCn",
          },
          {
            label: "英文描述",
            prop: "describeEn",
          },
          {
            label: "类型",
            prop: "columnType",
          },
          {
            label: "分类",
            prop: "attributeClassify",
          },
          {
            label: "必填",
            prop: "required",
            dicData: [
              {
                label: "是",
                value: 1
              },
              {
                label: "否",
                value: 0
              },
            ]
          },
          {
            label: "值可变",
            prop: "packageName",
          },
          {
            label: "多值",
            prop: "multi",
            dicData: [
              {
                label: "是",
                value: 1
              },
              {
                label: "否",
                value: 0
              },
            ]
          }
        ]

        this.option = option;
      }
      this.getExtends();
    }
  },
  watch: {
    show: {
      handler(v) {
        if (v) {
          const {attributes, step3} = this.allFormData();
          this.data = attributes && attributes.length > 0 && attributes ? attributes : (step3 ? step3 : []);
          this.before_();
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
